<!DOCTYPE html>
<html>

<head>
    <title>Align Content</title>
    <link href='resources/css/style.css' rel='stylesheet' />
    <link href='https://fonts.googleapis.com/css?family=Roboto+Mono' rel='stylesheet'>
</head>

<body>
    <h1>Flex Start</h1>
    <div class='container' id='flexstart'>
        <div class='left'></div>
        <div class='center'></div>
        <div class='right'></div>
    </div>
    <h1>Flex End</h1>
    <div class='container' id='flexend'>
        <div class='left'></div>
        <div class='center'></div>
        <div class='right'></div>
    </div>
    <h1>Center</h1>
    <div class='container' id='center'>
        <div class='left'></div>
        <div class='center'></div>
        <div class='right'></div>
    </div>
    <h1>Space Between</h1>
    <div class='container' id='between'>
        <div class='left'></div>
        <div class='center'></div>
        <div class='right'></div>
    </div>
    <h1>Space Around</h1>
    <div class='container' id='around'>
        <div class='left'></div>
        <div class='center'></div>
        <div class='right'></div>
    </div>
    <h1>Stretch</h1>
    <div class='container' id='stretch'>
        <div class='left'></div>
        <div class='center'></div>
        <div class='right'></div>
    </div>
</body>

</html>
